<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="'取消订单'"
    >
      <div id="page-sms-send">
        <h2>{{actSignUpTotality.actName}}</h2>
        <card>
          <p>报名组别：{{actSignUpTotality.groupName}}</p>
          <p>报名费用：{{actSignUpTotality.signUpTotal}}</p>
          <p>活动时间：{{actSignUpTotality.actStartTime | formatDate('YYYY-MM-DD HH:mm')}} - {{ actSignUpTotality.actEndTime | formatDate('YYYY-MM-DD HH:mm')}}</p>
          <p>报名时间：{{actSignUpTotality.recCreDt | formatDate('YYYY-MM-DD HH:mm')}}</p>
        </card>

        <card class="mt20">
          <h3 class="tc">报名人员列表</h3>
          <Table border :columns="columns" :data="actSiguUpList" class="mt20"></Table>
        </card>
        <card>
          <div class="card-no-shadow m10 mt20 p20 fs18">
          状态：{{ actSignUpTotality.payStatus === 0 ? '已支付': '未支付'}}
          <Button  v-if="actSignUpTotality.payStatus !== 0" @click="onCancelPay()" type="primary">取消订单</Button>
          </div>
        </card>
    </div>
    <div slot="footer">
      <Button @click="closeModal()">关闭</Button>
    </div>
  </Modal>
</template>

<script>
  import { mapGetters } from 'vuex'
  import activityApi from '@/api/activity'

  export default {
    name: 'order-modal',
    props: [
      'form'
    ],
    components: {
    },
    data () {
      return {
        loading: true,
        actGroupLoading: false,
        page: {
          total: 0
        },
        actSignUpTotality: {
          payStatus: 0
        },
        actSiguUpList: [],
        columns: [
          {
            title: '姓名',
            align: 'center',
            key: 'realName'
          },
          {
            title: '手机',
            align: 'center',
            key: 'mobile'
          },
          {
            title: '身份证号',
            align: 'center',
            key: 'idCard'
          }
        ]
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'form.visible': 'onClose'
    },
    methods: {
      ok () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitForm()
          }
        })
      },
      onClose (isVisible) {
        if (isVisible) {
          this.getSignUpTotality()
          this.getSignUpDetailList()
        }
      },
      closeModal () {
        this.form.visible = false
      },
      async onCancelPay () {
        this.$Modal.confirm({
          title: '确认取消订单吗',
          content: '<p>取消订单后订单中所有报名人员全部取消且不能恢复，确定取消？</p>',
          onOk: () => {
            this.sumbit()
          }
        })
      },
      async sumbit () {
        const { body } = await activityApi.signup.cancelSignUp({
          pkTotality: this.form.data.pkTotality
        })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('取消订单成功')
          this.form.visible = false
          this.$emit('submit')
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
            this.loading = false
          }, 500)
        }
      },
      async getSignUpTotality () {
        this.actGroupLoading = true
        const { body } = await activityApi.signup.getSignUpTotality({
          pkTotality: this.form.data.pkTotality
        })
        this.actSignUpTotality = body.responseData
      },
      async getSignUpDetailList () {
        this.actGroupLoading = true
        const { body } = await activityApi.signup.getSignUpDetailList({
          pkTotality: this.form.data.pkTotality,
          pkActBaseInfo: this.form.data.pkActBaseInfo
        })
        this.actSiguUpList = body.responseData
        this.actGroupLoading = false
      }
    },
    mounted () {
    }
  }
</script>
